<template>
	<view>
		<view class="preview">
			<!-- 图片视频VR展示 -->
			<u-swiper v-if="type === 1" mode="none" :list="data.images" height="520" border-radius="0" bg-color="#fff"></u-swiper>
			<video class="preview-video" v-if="type === 2" :src="imgUrl(data.videofiles)" controls show-fullscreen-btn></video>
			<image class="preview-vr" v-if="type ===3" :src="data.images[0]" 
				@click="jump(`/pages/webview/webview?url=${data.vr}`)"></image>
			
			<!-- 操作按钮 -->
			<view class="custom-btn u-flex">
				<text v-if="data.is_follow_house" class="num1 iconfont icon-shoucang_shixin active" @click="followHouse"></text>
				<text v-else class="num1 iconfont icon-shoucang" @click="followHouse"></text>
				<text class="num2 iconfont icon-xiaoxi" v-if="steward[0]"
				@click="jump(`/pages/chat/detail?id=${steward[0].id}&name=${steward[0].nickname}&avatar=${steward[0].avatar}`)"></text>
				<text class="num3 iconfont icon-fenxiang" @click="shareShow = !0"></text>
			</view>
			
			<!-- 类型切换按钮 -->
			<view class="ctrl-type u-flex">
				<view @click="type = 1" :class="{active:type === 1}">图片</view>
				<view @click="type = 2" :class="{active:type === 2}" v-if="data.videofiles">视频</view>
				<view @click="type = 3" :class="{active:type === 3}" v-if="data.vr">VR</view>
			</view>
		</view>
		
		<!-- 价格信息 -->
		<view class="base-info">
			<view class="title u-flex">
				<view class="name">{{data.name}}</view>
				<view class="label">
					<text v-if="data.status == '1'" class="wait">待售</text>
					<text v-if="data.status == '2'">在售</text>
					<text v-if="data.status == '3'" class="wait">售罄</text>
				</view>
			</view>
			<view class="label-list u-flex u-flex-wrap">
				<view v-for="item in data.housebaseset_features" :key="item.id">{{item.name}}</view>
			</view>
			<view class="price-info u-flex">
				
				<view class="item">
					<view class="price">{{Number(data.totalprice)}}(万/套)</view>
					<view class="tit">总价</view>
				</view>
				<view class="item">
					<view class="price">{{data.covered_area || '-'}}m²</view>
					<view class="tit">占地面积</view>
				</view>
				<view class="item">
					<view class="price">{{data.floor_area || '-'}}m²</view>
					<view class="tit">总建筑面积</view>
				</view>
			</view>
		</view>
		
		<!-- 基础信息 -->
		<view class="panel-info">
			<view class="panel-title u-flex">
				<view class="title">房源基本信息</view>
				<view class="more" @click="$store.commit('setHouseMore',data),jump('/pages/house/more/more')">查看更多<text class="iconfont icon-jiantouyou"></text></view>
			</view>
			<view class="panel-content u-flex u-flex-wrap">
				<view class="line-box u-flex line-box-nowrap">
					<view class="title">单价：</view>
					<view class="value">{{Number(data.unitprice)}}元/平</view>
				</view>
				<view class="line-box u-flex line-box-nowrap" v-if="data.developers">
					<view class="title">开发商：</view>
					<view class="value">{{data.developers}}</view>
				</view>
			
				<view class="line-box u-flex" v-if="data.openingtime">
					<view class="title">挂牌：</view>
					<view class="value">{{$u.date(data.openingtime,'yyyy-mm-dd')}}</view>
				</view>
				<view class="line-box u-flex" v-if="data.housebaseset_orientation_name">
					<view class="title">朝向：</view>
					<view class="value">{{data.housebaseset_orientation_name}}</view>
				</view>
				<view class="line-box u-flex" v-if="data.buildingtype">
					<view class="title">楼型：</view>
					<view class="value">{{data.buildingtype}}</view>
				</view>
				<view class="line-box u-flex" v-if="data.housebaseset_decorationtype_id">
					<view class="title">装修：</view>
					<view class="value">{{data.housebaseset_decorationtype_id}}</view>
				</view>
				<view class="line-box u-flex" v-if="data.housebaseset_propertytype_name">
					<view class="title">权属：</view>
					<view class="value">{{data.housebaseset_propertytype_name}}</view>
				</view>
				<view class="line-box u-flex" v-if="data.propertyrightsyears">
					<view class="title">产权年限：</view>
					<view class="value">{{data.propertyrightsyears}}年</view>
				</view>
				<view class="line-box u-flex" v-if="data.region_name">
					<view class="title">板块区域：</view>
					<view class="value">{{data.region_name}}</view>
				</view>
				<view class="line-box u-flex" v-if="data.name">
					<view class="title">小区：</view>
					<view class="value">{{data.name}}</view>
				</view>
			</view>
			
		</view>
		
		<!-- 通勤 -->
		<view class="panel-info">
			<view class="panel-title u-flex">
				<view class="title">周边配套及通勤</view>
				<!-- <view class="more">查看更多<text class="iconfont icon-jiantouyou"></text></view> -->
			</view>
			<map v-if="data" scale="16" class="map-info" :latitude="data.lat" :longitude="data.lng" :markers="markers" @markertap="openMap"></map>
			<view class="panel-content u-flex u-flex-wrap">
				<view class="line-box u-flex line-box-nowrap" v-if="data.traffic">
					<view class="title">交通：</view>
					<view class="value">{{data.traffic}}</view>
				</view>
				<view class="line-box u-flex line-box-nowrap" v-if="data.education">
					<view class="title">教育：</view>
					<view class="value">{{data.education}}</view>
				</view>
				<view class="line-box u-flex line-box-nowrap" v-if="data.hospital">
					<view class="title">医疗：</view>
					<view class="value">{{data.hospital}}</view>
				</view>
				<view class="line-box u-flex line-box-nowrap" v-if="data.life">
					<view class="title">生活：</view>
					<view class="value">{{data.life}}</view>
				</view>
			</view>
		</view>
		
		<view class="panel-info">
			<view class="panel-title u-flex">
				<view class="title">图文展示</view>
			</view>
			<view style="padding: 20rpx;">
				<u-parse :html="data.content"></u-parse>
			</view>
		</view>
		
		<!-- 户型 -->
		<!-- <view class="panel-info" v-if="data.housetypeimages">
			<view class="panel-title u-flex">
				<view class="title">户型</view>
				<view class="more">查看更多<text class="iconfont icon-jiantouyou"></text></view>
			</view>
			<view class="house-type">
				<image :src="imgUrl(data.housetypeimages)" mode="widthFix" @click="$app.showImg(data.housetypeimages)"></image>
				<view class="more" @click="jump(`/pages/house/more/images?img=${data.housetypeimages.toString()}`)">查看更多<text class="iconfont icon-jiantouyou"></text></view>
			</view>
		</view> -->
		
		<!-- 管家推荐 -->
		<view class="panel-info steward-sticky">
			<view class="panel-title u-flex">
				<view class="title">管家推荐</view>
				<!-- <view class="more" @click="jump(`/pages/agent/steward-index?type=6&id=${data.id}`)">查看更多<text class="iconfont icon-jiantouyou"></text></view> -->
			</view>
			<view class="steward safe-area-inset-bottom">
				<detail-steward-list :list="steward" type="6" :did="data.admin_housekeeper_id" :info="data"></detail-steward-list>
			</view>
		</view>
		
		<!-- 分享 -->
		<u-popup v-model="shareShow" mode="bottom" border-radius="10" closeable>
			<view class="share">
				<view class="u-flex share-box">
					<view class="share-item">
						<button class="u-reset-button" open-type="share">
							<view class="iconfont icon-weixin"></view>
							<text class="text">微信</text>
						</button>
					</view>
					<view class="share-item" v-if="steward[0]"
						@click="jump(`/pages/chat/detail?id=${steward[0].id}&name=${steward[0].nickname}&avatar=${steward[0].avatar}`)">
						<image :src="imgUrl(steward[0].avatar)"></image>
						<text class="text">{{steward[0].nickname}}</text>
					</view>
				</view>
				<view class="cancel" @click="shareShow = !1">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,//展示类型 1 图片 2视频 3 VR
				data:'',
				markers:[],
				steward:[],
				shareShow:!1,//分享
			}
		},
		methods: {
			followHouse(){
				this.$u.api.followHouse({
					build_type:6,
					house_id:this.data.id
				}).then(res=>{
					if(res == '取消成功'){
						this.data.is_follow_house = 0
					}
					if(res == '关注成功'){
						this.data.is_follow_house = 1
					}
					this.$u.toast(res)
				})
			},
			openMap(){
				uni.openLocation({
					name:this.data.address,
					latitude:Number(this.data.lat),
					longitude:Number(this.data.lng)
				})
			}
		},
		onLoad({id}) {
			this.$u.api.plant.detail({id}).then(res=>{
				this.markers.push({
					id:1,
					latitude:res.lat,
					longitude:res.lng,
					iconPath:'/static/icon/dingwei.png',
					title:res.name,
					width:30,
					height:30
				})
				this.data = res;
				this.$u.post('/api/housekeeper/getKeeper',{id:this.data.admin_housekeeper_id})
				.then(res=>this.steward = [res] || [])
			})
			// this.$u.post('/api/housekeeper/randIndex',{type:6,id}).then(res=>this.steward = res)
		}
	}
</script>

<style lang="scss">
	page{background-color: #f4f4f4;}
	// 展示
	.preview{
		position: relative;height: 520rpx;
		.preview-video{width: 750rpx;height: 520rpx;}
		.preview-vr{display: block;width: 750rpx;height: 520rpx;}
		.ctrl-type{border-radius: 28rpx;background-color: rgba(255,255,255,.5);position: absolute;left: 50%;transform: translateX(-50%);bottom: 50rpx;
			view{width: 100rpx;text-align: center;height: 56rpx;line-height: 56rpx;font-weight: bold;color: #111;}
			.active{background-color: #ff3737;color: #fff;border-radius: 28rpx;}
		}
		.custom-btn{position: absolute;top: 30rpx;right: 40rpx;color: #fff;
			.iconfont{font-size: 44rpx;padding: 2rpx;}
			.num2{font-size: 50rpx;margin: 4rpx 10rpx 0;}
			.num3{font-size: 40rpx;}
			.active{color: #FF3737;}
		}
	}
	// 基础信息
	.base-info{
		background-color: #fff;padding: 30rpx 40rpx 40rpx;
		.title{
			.name{color: #111;font-size: 38rpx;font-weight: bold;}
			.label{
				text{background-color: #ff3737;color: #fff;font-size: 24rpx;padding: 2rpx 8rpx;border-radius: 6rpx;margin: 0 6rpx;}
				.wait{background-color: #999;}
			}
		}
		.label-list{padding: 14rpx 0;
			view{color: #ffa400;font-size: 24rpx;margin-top: 4rpx;margin-right: 20rpx;
				&:last-child{margin-right: 0;}
			}
		}
		.price-info{
			justify-content: space-between;
			.item{
				.price{color: #f00;font-size: 32rpx;font-weight: bold;}
				.tit{margin-top: 6rpx;}
			}
		}
		.counselor{
			border: 1rpx solid #ccc;border-radius: 16rpx;height: 92rpx;justify-content: space-between;margin-top: 14rpx;
			text{font-size: 30rpx;font-weight: bold;margin-left: 30rpx;}
			.xyh{background-color: #ff3737;color: #fff;border-radius: 14rpx;padding: 14rpx 40rpx;margin-right: 14rpx;}
		}
	}
	
	// 房源基本信息
	.panel-info{background-color: #fff;margin-top: 16rpx;
		.panel-title{
			padding: 20rpx 40rpx;justify-content: space-between;
			.title{font-size: 32rpx;font-weight: bold;color: #111;}
			.more{color: #5d5d5d;}
		}
		.panel-content{padding: 20rpx 40rpx;}
		.line-box{
			align-items: flex-start;width: 50%;padding: 8rpx 0;
			&.line-box-nowrap{width: 100%;}
			.title{color: #979797;white-space: nowrap;}
			.value{color: #000000;word-break: break-all;text-align: justify;}
		}
		// 地图
		.map-info{width: 750rpx;height: 300rpx;}
		// 富文本
		.content-html{padding: 0 40rpx 40rpx;}
		// 户型图
		.house-type{
			padding: 0 40rpx 40rpx;
			image{display: block;width: 100%;margin-top: 40rpx;
				&:first-child{margin-top: 0;}
			}
			.more{text-align: center;font-size: 30rpx;color: #666;padding: 30rpx 0 0 0;
				.iconfont{margin-left: 14rpx;}
			}
		}
		// 管家
		.steward{
			padding-left: 40rpx;padding-right: 40rpx;
		}
	}
	// 管家悬浮
	.steward-sticky{position: sticky;width: 100%;bottom: 0;box-shadow: 0 -1rpx 14rpx #ddd;}
	
	// 分享
	.share{
		.share-box{
			justify-content: space-around;padding: 40rpx 120rpx;
			.share-item{
				image{width: 100rpx;height: 100rpx;border-radius: 50%;display: block;}
				.iconfont{width: 100rpx;height: 100rpx;text-align: center;line-height: 100rpx;color: #fff;background-color: #28c445;font-size: 70rpx;border-radius: 50%;}
				.text{text-align: center;display: block;margin-top: 10rpx;}
			}
		}
		.cancel{text-align: center;border-top: 1rpx solid #ddd;line-height: 90rpx;font-size: 30rpx;}
	}
</style>